const Home = () => {
  return (
    <>
      <section class="hero" aria-labelledby="hero-heading">
        <div class="hero-content">
          <h1 id="hero-heading">构建未来的设计系统</h1>
          <p class="hero-subtitle">KineticX 提供全面的设计系统解决方案，助力您的产品实现卓越的用户体验</p>
          <div class="hero-cta">
            <a href="#demo" class="cta-button primary">预约演示</a>
            <a href="#learn-more" class="cta-button secondary">了解更多</a>
          </div>
        </div>
        <div class="hero-background">
          <img class="hero-image" data-src="assets/images/hero-bg.webp" alt="KineticX 设计系统展示" width="1920" height="1080"
            loading="lazy" />
        </div>
      </section>

      <main class="features" id="features" role="main">
        <h2 class="section-title">核心功能</h2>
        <div class="feature-grid">
          <article class="feature-card" aria-labelledby="feature1">
            <div class="feature-card-content">
              <h3 id="feature1">组件库</h3>
              <p>丰富的预构建组件，支持快速开发和一致的用户体验</p>
            </div>
          </article>
          <article class="feature-card" aria-labelledby="feature2">
            <div class="feature-card-content">
              <h3 id="feature2">设计规范</h3>
              <p>完整的设计指南，确保产品视觉和交互的一致性</p>
            </div>
          </article>
          <article class="feature-card" aria-labelledby="feature3">
            <div class="feature-card-content">
              <h3 id="feature3">响应式支持</h3>
              <p>全面的响应式设计支持，适配各种设备和屏幕尺寸</p>
            </div>
          </article>
          <article class="feature-card" aria-labelledby="feature4">
            <div class="feature-card-content">
              <h3 id="feature4">无障碍设计</h3>
              <p>符合 WCAG 标准的无障碍设计，确保所有用户都能使用</p>
            </div>
          </article>
        </div>
      </main>
    </>
  )
}

export default Home